import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useTemuStore } from '@/store/temu';
import AvaliableSynchronizationSetting from './AvaliableSynchronizationSetting';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { useId } from 'react';
import ProxySetting from '@/components/ProxySetting';
import SourceInfoSetting from './SourceInfoSetting';
import RegidtrationActivitySetting from './RegidtrationActivitySetting';

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export default function TemuSetting({ children, className, ...props }: Props) {
  const isDefaultOpenDialog = useTemuStore((state) => state.isDefaultOpenDialog);
  const dispatch = useTemuStore((state) => state.dispatch);
  const id = useId();

  return (
    <div className={className} {...props}>
      <div className="flex flex-co grow">
        <Tabs defaultValue="avaliable-synchronization-settings" className="flex flex-col grow">
          <div className="flex">
            <TabsList>
              <TabsTrigger value="avaliable-synchronization-settings">同步库存设置</TabsTrigger>
              <TabsTrigger value="regidtration-activity-settings">报名活动设置</TabsTrigger>
              <TabsTrigger value="source-info-settings">货源信息设置</TabsTrigger>
              <TabsTrigger value="proxy-settings">代理设置</TabsTrigger>
              <TabsTrigger value="onther-settings">其他设置</TabsTrigger>
            </TabsList>
            <SettingsPersistedCorssOrigin
              store={useTemuStore}
              origin="https://seller.kuajingmaihuo.com/"
              suggestedName="temu-settings.json"
              className="ml-auto"
            ></SettingsPersistedCorssOrigin>
          </div>
          <TabsContent
            value="avaliable-synchronization-settings"
            className="grow flex flex-col data-[state=inactive]:hidden"
          >
            <Card className="grow flex flex-col">
              <AvaliableSynchronizationSetting className="grow"></AvaliableSynchronizationSetting>
            </Card>
          </TabsContent>
          <TabsContent
            value="regidtration-activity-settings"
            className="grow flex flex-col data-[state=inactive]:hidden"
          >
            <Card className="grow flex flex-col">
              <RegidtrationActivitySetting className="grow"></RegidtrationActivitySetting>
            </Card>
          </TabsContent>
          <TabsContent
            value="source-info-settings"
            className="grow flex flex-col data-[state=inactive]:hidden"
          >
            <Card className="grow flex flex-col">
              <SourceInfoSetting className="grow"></SourceInfoSetting>
            </Card>
          </TabsContent>
          <TabsContent
            value="proxy-settings"
            className="grow flex flex-col data-[state=inactive]:hidden"
          >
            <Card className="grow flex flex-col">
              <ProxySetting className="grow"></ProxySetting>
            </Card>
          </TabsContent>
          <TabsContent
            value="onther-settings"
            className="grow flex flex-col data-[state=inactive]:hidden"
          >
            <Card className="grow flex flex-col">
              <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
                <Checkbox
                  checked={isDefaultOpenDialog}
                  onCheckedChange={(state) => {
                    dispatch({
                      type: 'update',
                      update(draftState) {
                        draftState.isDefaultOpenDialog = state ? true : false;
                      },
                    });
                  }}
                  id={id + '-is-default-open-dialog'}
                  className="rounded-[2px]"
                />
                <Label className="whitespace-nowrap mb-0" htmlFor={id + '-is-default-open-dialog'}>
                  是否默认打开弹框
                </Label>
              </div>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
